<template>
  <view v-if="resultDetails" class="container">
    <template v-if="resultShow">
      <image class="result-img" :src="`${imgBaseUrl}${resultDetails.detailBg}`" mode="widthFix"/>
      <image class="back-btn" @click="showResult(false)" :src="staticImgs.backBtn"/>
    </template>
    <view v-else class="share-container">
      <image :src="resultImg" mode="widthFix" class="share-bg" show-menu-by-longpress/>
      <view class="mask-bg"/>
      <view class="result-btn-row flex-between">
        <image :src="staticImgs.leftIcon" class="result-decoration" />
        <image :src="staticImgs.resultBtn" class="result-btn" @click="showResult(true)" key="result-btn"/>
        <image :src="staticImgs.rightIcon" class="result-decoration" />
      </view>
      <view class="download">
        <view class="download-text">长按保存</view>
        <image :src="staticImgs.downloadIcon" class="download-icon"/>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {useDrawPoster} from '@/components/u-draw-poster'

  export default {
    props: {
      pageData: {
        type: Object,
        default: null
      }
    },
    data(){
      return {
        staticImgs: {
          defaultQrcode: this.imgBaseURL + '/scl/default_miniapp_qrcode_new.png',
          backBtn: this.imgBaseURL + '/scl/result/bestxg/back-btn.png',
          resultBtn: this.imgBaseURL + '/scl/result/bestxg/result-btn-v2.png',
          downloadIcon: this.imgBaseURL + '/scl/result/bestxg/download.png',
          leftIcon: this.imgBaseURL + '/scl/result/bestxg/left.png',
          rightIcon: this.imgBaseURL + '/scl/result/bestxg/right.png'
        },
        resultDetails: undefined,
        imgBaseUrl: this.imgBaseURL,
        resultShow: false,
        resultImg: '',
        listData: []
      }
    },
    computed: {
      ...mapGetters('user', ['clientUserUid'])
    },
    watch:{
      pageData: {
        handler(val) {
          if (val) {
            const resultDetails = val.resultDetails
            this.resultDetails = resultDetails
            this.initCanvas()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods:{
      showResult(flag) {
        this.resultShow = flag
        this.$emit('posterLoadingCom', flag)
      },
      async initCanvas() {
        let jumpUrl = 'p=2@id=' + this.pageData.sclId
        this.resultImg = await this.createChipCanvas(`${this.imgBaseURL}${this.resultDetails.shareBg}`, jumpUrl);
      },
      /**
       * 绘制海报
       */
      async createChipCanvas(imgUrl, jumpUrl) {
        console.log(imgUrl, '-----------------imgUrl');
        const tmpScene = jumpUrl || 'r=5@id=' + this.clientUserUid
        const tmpPage = 'pages/index/index'
        let qrCode = this.staticImgs.defaultQrcode
        let imgD = ''
        const resSclInfo = await this.$u.api.getSclInfo({sclId:this.pageData.sclId})
        if(resSclInfo.data.data.url){
        	qrCode = resSclInfo.data.data.url
        }else{
        	const {
        		data: dRes
        	} = await this.$u.api.getQrcodeUrl({
        		sceneStr: tmpScene,
        		pageStr: tmpPage
        	})
        	
        	if (dRes.success) {
        		qrCode = dRes.data
        	}
        }
        console.log(qrCode, '----------qrCode')

        try {
          // 创建绘制工具
          const dp = await useDrawPoster({
            selector: 'dcanvas',
            loading: {
              create:'结果报告生成中...'
            },
            debug: true,
            width: 750,
            height: 1624
          })
          const w = dp.canvas.width
          const h = dp.canvas.height

          console.log(dp.canvas, '-----------dp.canvas-------')

          dp.draw(async (ctx) => {
            console.log(ctx, '-----------ctx')
            // 绘制背景图
            await ctx.drawImage(imgUrl, 0, 0, w, h)
            // 小程序二维码
            await ctx.drawRoundImage(qrCode, 138, 1412, 125, 125,
                100)
          })

          imgD = await dp.create()
        } catch (e) {
          console.log(e, '绘图')
        }
        console.log(imgD, '=========imgD')
        return imgD || imgUrl
      }
    },
    mounted() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
    },
    beforeDestroy() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    }
  }
</script>

<style lang="scss" scoped>
@keyframes move {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(50rpx);
  }
  75% {
    transform: translateY(-50rpx);
  }
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.container {
  position: relative;
  min-height: 100vh;
}

.result-container {
  padding-bottom: 160rpx;
}

.result-img {
  width: 100%;
}

.back-btn {
  position: fixed;
  right: 0;
  top: 540rpx;
  width: 163rpx;
  height: 177rpx;
  animation: move 6s linear infinite;
}

.share-container {
  position: relative;
  height: 1560rpx;
  min-height: 100vh;
}

.share-bg {
  width: 100%;
  height: 1327rpx;
  min-height: 100vh;
  position: relative;
}

.mask-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 251rpx;
  pointer-events: none;
  background-color: #04114C;
}

.result-btn-row {
  position: absolute;
  bottom: 124rpx;
  left: 50rpx;
  right: 50rpx;
  pointer-events: none;
}

.result-btn {
  width: 360rpx;
  height: 70rpx;
  pointer-events: auto;
}

.result-decoration {
  width: 102rpx;
  height: 104rpx;
  pointer-events: none;
  animation: flash 1s linear infinite;
}

.download {
  position: absolute;
  bottom: 65rpx;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  .download-text {
    font-weight: bold;
    font-size: 29rpx;
    color: #FFF;
  }

  .download-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 12rpx;
  }
}
</style>